<template>
  <view
    v-if="detail"
    class="_goods-detail-column"
    @click="onDetail"
  >
    <view class="_goods-img">
      <x-image :src="formatOss(detail.productMainPic)"/>
      <view v-if="detail.status===0" class="_img-over"></view>
    </view>
    <view class="_goods-title">
      <view class="flex1">
        <view class="_indent2" :style="{'color': detail.status === 0 ? '#999999' : '#323233'}" v-if="lineClamp">
          {{ detail.productTitle }}
        </view>
        <view class="_indent2 line-clamp1" :style="{'color': detail.status === 0 ? '#999999' : '#323233'}" v-else>
          {{ detail.productTitle }}
        </view>
        <view class="_indent1">{{ detail.productSellingPoint || '' }}</view>
        <view class="_sold">
          <text>已售{{ detail.salesNum }}件</text>
        </view>
      </view>
      <view v-if="detail.status===0" class="_goods-price">
        <text style="color: #999999">已失效</text>
      </view>
      <view v-else class="_goods-price">
        <view class="flex1">
          <text>¥</text>
          <text class="_blod">{{ formatPrice(detail) }}</text>
          <text class="_decoration" v-if="detail.originalPrice">¥{{ detail.originalPrice }}</text>
        </view>
        <view class="add-cart">
          马上抢
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import $sr from '@/utils/x-sr';
import $Tools from '@/utils/x-tools';
import XImage from '@/components/x-image';

export default {
  name: 'PColumn',
  components: {
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => null
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    },
    lineClamp: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {
    this.srTrack('expose_sku_component');
  },
  methods: {
    formatPrice: $Tools.formatPrice,
    // 格式化图片
    formatOss(url) {
      return $Tools.formatOss(url, 300);
    },
    onDetail() {
      this.srTrack('trigger_sku_component');
      const query = this.$tools.object2param({
        productId: this.detail.productId,
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source
      });
      uni.navigateTo({
        url: `/pages/transit-product/index?${query}`
      });
    },
    // 有数上报
    srTrack(name) {
      $sr.trackProductCard(name, this.detail);
    }
  }
};
</script>

<style lang="scss">
._goods-detail-column {
  box-sizing: border-box;
  width: 100%;
  //min-height: 240px;
  margin-bottom: 16px;
  display: flex;
  background: #FFFFFF;
  padding: 24px;
  border-radius: 6px;

  ._goods-img {
    flex-shrink: 0;
    position: relative;
    width: 200px;
    height: 200px;
    background: #FFE4E4;

    ._tips {
      position: absolute;
      top: 10px;
      left: 0;
      min-width: 72px;
      height: 36px;
      line-height: 36px;
      font-size: 24px;
      text-align: center;
      color: #fff;
      background: linear-gradient(270deg, #FF2725 0%, #FF761C 100%);
      border-radius: 0px 50px 50px 0px;
    }

    ._img-over {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #FFFFFF;
      opacity: 0.6;
      z-index: 999;
    }
  }

  ._goods-title {
    background: #fff;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;

    ._indent2 {
      color: #323233;
      font-size: 28px;
      font-weight: bold;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }

    .line-clamp1 {
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }

    ._indent1 {
      margin-top: 6px;
      margin-bottom: 8px;
      color: #999999;
      font-size: 24px;
      font-weight: normal;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }

    ._sold {
      display: inline-block;
      min-width: 120px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #FFFBE8;
      color: #ED6A0C;
      font-size: 24px;
      padding: 0 4px;
    }

    ._goods-price {
      font-size: 24px;
      color: $uni-color-primary;
      display: flex;
      align-items: flex-end;

      ._blod {
        font-size: 36px;
        font-weight: bold;
      }

      ._decoration {
        text-decoration: line-through;
        color: #999999;
        margin-left: 6px;
      }

      .add-cart {
        min-width: 104px;
        height: 48px;
        border-radius: 4px;
        background: $uni-color-primary;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
      }
    }
  }
}
</style>
